﻿<%@ Control Language="C#" AutoEventWireup="true" CodeFile="List.ascx.cs" Inherits="QuanLyKTX_ThongKe_List" %>
<div class="subnav admin-views-subnav">
    <div class="container-fluid">
        <ul class="nav nav-pills">
            <li class="active"><a href="#">Sinh viên</a></li>
            <li><a href="#">Thống kê</a></li>
        </ul>
    </div>
</div>
<div class="container-fluid">

    <div class="form-horizontal form-bordered form-validate" id="create">
        <div class="page-header clearfix">
            <h2 class="page-title pull-left">THỐNG KÊ
                <span id="spinner" class="loaded"><i class="fa fa-spinner fa-spin fa-sm"></i></span>
            </h2>
        </div>

    </div>

    <div class="editor admin-editor">

        <div id="overlay-editor">
            <div class="row">
            <div class="col-md-3">
                <div class="list-group">
                    <a href="#" class="list-group-item active">Sinh viên
                    </a>
                    <a href="#" class="list-group-item">Phòng</a>
                    <a href="#" class="list-group-item">Morbi leo risus</a>
                    <a href="#" class="list-group-item">Porta ac consectetur ac</a>
                    <a href="#" class="list-group-item">Vestibulum at eros</a>
                </div>
                </div>
                <div class="col-md-9">
                    <div class="panel panel-primary">
                        <div class="panel-heading">THỐNG KÊ SINH VIÊN</div>
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-md-6"><div id="chart_div"></div></div>
                                <div class="col-md-6">  <div id="chart_div2"></div></div>
                            </div>
                             
                          
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


</div>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
    // Load the Visualization API and the piechart package.
    google.load('visualization', '1.0', { 'packages': ['corechart'] });

    // Set a callback to run when the Google Visualization API is loaded.

    // Callback that creates and populates a data table,
    // instantiates the pie chart, passes in the data and
    // draws it.
    
    var tongSoSinhVien, soSinhVienNam, soSinhVienNu;
    $.ColorLife.jsonThongKeChiTiet(function (data) {
      
        soSinhVienNam = data.SoSinhVienNam;
        soSinhVienNu = data.SoSinhVienNu;
        tongSoSinhVien = data.TongSoSinhVien;

        google.load('visualization', '1.0', { 'packages': ['corechart'] });

        // Set a callback to run when the Google Visualization API is loaded.

        // Callback that creates and populates a data table,
        // instantiates the pie chart, passes in the data and
        // draws it.
        google.setOnLoadCallback(drawChart);
    });

    function drawChart() {

        // Create the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Topping');
        data.addColumn('number', 'Slices');
        data.addRows([        
          ['Nam', soSinhVienNam], ['Nữ', soSinhVienNu],
        ]);

        // Set chart options
        var options = {
            'title': 'Số lượng sinh viên (' + tongSoSinhVien +')',
            
            is3D: true,

        };

        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, options);

        //var chart2 = new google.visualization.PieChart(document.getElementById('chart_div2'));
        //chart2.draw(data, options);
    }

    
</script>
